<!-- 排班管理 -->
<template>
  <div class="dashboard-container transport-task customer-list-box">
     <div class="box-1">
      <div class="box-2">
        <el-form ref="list" label-width="90px" :model="list">
          <el-row type="flex">
            <el-col>
              <el-form-item label="员工账号 : ">
                <el-input v-model="list.employeeNumber" placeholder="请输入员工账号"></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="员工姓名 : ">
                <el-input v-model="list.name" placeholder="请输入员工账号"></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="工作模式 : ">
                <el-select v-model="list.workPatternId" placeholder="请选择当前工作模式">
                  <el-option
                    v-for="item in Monday"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex">
            <el-col>
              <el-form-item label="月数 : ">
                <el-date-picker
                  type="month"
                  v-model="list.month"
                  value-format="yyyy-MM"
                  placeholder="请选择月">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="所属机构 : ">
                 <el-select ref="tree" v-model="list.agencyId" placeholder="请选择所属机构">
                    <el-tree :data="defaultPropsList" :props="defaultProps" @node-click="handleNodeClicks"></el-tree>
                      <el-option
                        v-for="item in defaultPropsList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                  
                </el-select>
              </el-form-item>
            </el-col>
            <el-col>
              <el-button type="danger" @click="changeList">搜索</el-button>
              <el-button @click="clear">重置</el-button>
            </el-col>
          </el-row>
        </el-form>

      </div>
      <div class="box-3">

      <!-- 按钮 -->
      <el-button type="danger" @click="$router.push('workArrange-setting')">排版设置</el-button>
      <el-button type="warning" plain @click="setinstall">绑定排版</el-button>

      <!-- 表格 -->
      <el-table ref="multipleTable" :data="fromList" @selection-change="handleSelectionChange" tooltip-effect="dark" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="employeeNumber" fixed width="100" label="员工账号"></el-table-column>
        <el-table-column prop="name" fixed width="100" label="员工姓名"></el-table-column>
        <el-table-column prop="phone" fixed width="120" label="员工电话"></el-table-column>
        <el-table-column prop="userType" fixed width="100" label="员工角色"></el-table-column>
        <el-table-column prop="workPatternName" fixed width="120" label="当前工作模式"></el-table-column>
        <el-table-column v-for="(item,index) in 30" :key="index" prop="workPatternName" width="80" :label="`${index+1}`">
          <template slot-scope="{row}">
            <div class="work" v-if="row.workSchedules[index] === true">上</div>
            <div class="rest" v-else>休</div>
          </template>
        </el-table-column>
  
  <!-- 分页器 -->
      </el-table >

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="list.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total=total>
        </el-pagination>
      </div>
     </div>

     <!-- 人工调整 -->
     <el-dialog
        title="人工调整"
        :visible.sync="dialogVisible"
        width="25%">
        <div class="box-4">
          <el-form >
            <el-form-item label-width="20px">
              <el-radio-group v-model="schedulings.workPatternType">
                <el-radio @click.native="add1" :label="'1'">礼拜制</el-radio>
                <el-radio @click.native="add2" :label="'2'">连续制</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label-width="90px" label="模式名称">
             <el-select v-model="schedulings.workPatternId" placeholder="请选择">
                <el-option
                  v-for="item in schedulings.workPatternType === '1' ? Monday : Monday2"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="danger" @click="notarize">确 定</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import { peopleSet, selectWorkHistoryList, workManage } from '@/api/transit'
import { agencyList } from '@/api/institutions'
export default {
  data(){
    return {
      total:null,
      //from 表单
      list:{
        page:1,
        pageSize:10,
        employeeNumber:null,//员工账号
        name:null,//员工姓名
        workPatternName:null,//工作模式名称
        workPatternId:null,//工作模式id
        month:null,//月数                 
        agencyName:null,//所属机构
        agencyId:null,
      },
      fromList:[], //表格 获取列表
      //区分有没有 勾选 
        num:null,
        //弹层
        dialogVisible:false,
        Monday0:[],//工作模式列表
        // 礼拜制
        Monday:[],
        // 连续制
        Monday2:[],
        res:null,
        //人工调整
        schedulings:{
          userIdList:null,//排班id列表
          workPatternId:null,//工作模式id
          workPatternType:null,//工作模式类型 1：礼拜制，2：连续制
        },
        //树形结构
         defaultPropsList:[],
          defaultProps: {
            children: 'children',
            label: 'name'
          },
          //树形结构搜索
          filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
          },
    }
  },
  created(){
    this.orderListList()
    this.handleNodeClick()
    this.workPatternList()
  },
  methods:{
    // 树形结构数据
    async handleNodeClick(dak) { 
      console.log( '数', dak);
     const {data} = await agencyList()
      this.defaultPropsList = JSON.parse(data)  
      console.log(this.defaultPropsList);
    },
    handleNodeClicks (node) {
    this.list.agencyId = node.id
    this.$refs.tree.blur();
      console.log(node);
    },
    // 获取列表
   async orderListList(){
     const {data, data:{items,items:{ workSchedules }} } = await workManage(this.list)
     this.total = Number(data.counts)
     this.fromList = items
     console.log( '表格', this.fromList);
    },
    //搜索功能
    changeList(){
      this.list.page = 1
      this.orderListList()
    },
    //清除表单数据
    clear(){
      // this.$refs.list.resetFields()
      this.list = {
        page:null,
        pageSize:null,
        employeeNumber:null,
        name:null,
        workPatternName:null,
        agencyName:null
      },
      this.orderListList()
    },
    // 一页多少条数据
    handleSizeChange(val){
      this.list.pageSize = val
      this.orderListList()
    },
    // 当前页数
    handleCurrentChange(val){
      this.list.page = val
      this.orderListList()
    },
    
    //多选
    handleSelectionChange(val){
      this.num = val.length
      this.res = val.map((item)=>{
        return item.id
      })
     
    },
   
    //礼拜制
    add1(){
      this.schedulings.workPatternType = '1'
    },
    //连续制
    add2(){
      this.schedulings.workPatternType = '2'
    },
  // 工作模式列表（ 下拉 )
    async workPatternList(){
     const {data} = await selectWorkHistoryList()
     console.log(data);
     this.Monday = data[1]
     this.Monday2 = data[2]
    },
    //绑定排版(弹层)
   setinstall(){
    // 如果没有勾选则提示用户
    if(this.num > 0){
      this.schedulings.workPatternType = '1'
      this.dialogVisible = true
      
     } else {
      this.$message.error('请选择调整人员')
     }
    },
  
    // 确定 
    async notarize(){
     await peopleSet({
        userIdList:this.res,
        workPatternId:this.schedulings.workPatternId,
        workPatternType:this.schedulings.workPatternType
       })
       this.orderListList()
       this.dialogVisible = false
       this.$message.success('绑定成功')
       this.schedulings.workPatternId = null
    }
   
    
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.box-4{
  padding: 10px 25px;
}
::v-deep .el-pagination{
  display: flex;
  justify-content: center;
  margin: 20px 0 !important;

}
::v-deep .el-form-item{
  margin-right: 56px;
}
::v-deep .el-table{
  margin-top: 20px;
}
.box-3{
  margin-top: 20px;
  background-color: #fff;
  padding: 20px;
}
.box-2{
  background-color: #fff;
  padding: 20px;
  height: 160px;
}
.box-1{
      padding: 23px 20px 20px;
      width: 100%;
}
::v-deep th.date{
  .cell{
    padding-left: 17px!important;
  }
}
.work {
  width: 24px!important;
  height: 24px!important;
  background: #ffeeeb;
  border: 1px solid #e15536;
  border-radius: 50%;
  text-align: center;
  color: #e15536;
  font-size: 13px;
}
.history-name {
  width: auto !important;
  ::v-deep .el-input__inner {
    width: 293px;
  }
}

.workArrange-manage-people-setting {
::v-deep .el-dialog__body {
    padding: 30px 50px 10px 50px !important;
  }

::v-deep .el-dialog__footer {
    padding-bottom: 40px;
  }
}

.work-type {
::v-deep .el-form-item__content {
    margin-left: 40px !important;
  }
::v-deep .el-radio:first-child {
    margin-right: 80px !important;
  }
::v-deep.el-radio__label {
    font-weight: bold;
    color: #333333;
  }
}

.dialog-footer {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  .el-button {
    width: 89px;
    height: 36px;
    padding: 10px 20px;
  }
}

.rest {
  width: 24px;
  height: 24px;
  background: #eff3f8;
  border: 1px solid #d8dde3;
  border-radius: 50%;
  text-align: center;
  color: #20232a;
  font-size: 13px;
}

.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}
.transport-task ::v-deep .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}

// 下拉框
::v-deep .el-select {
  width: 100%;
}

/*定义滚动条轨道 内阴影+圆角*/
::v-deep .el-table--scrollable-x .el-table__body-wrapper {
  padding-bottom: 5px;
  margin-bottom: 5px;
  &::-webkit-scrollbar {
    height: 10px;
  }

  /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(144, 147, 153, 0.3);
  }

  &::-webkit-scrollbar-track-piece {
    margin-right: 3px;
    margin-left: 3px;
  }
}
::v-deep .el-card{
  overflow: initial;
}
</style>

<style></style>
